import * as React from 'react';
import { Form, Input, Icon, Select, Radio, Button, DatePicker, Upload } from 'antd';
import MForm, { createMForm, FormItemLayout } from '../../../component/form/MForm';

class CustomerDetailStep extends MForm {

  constructor(props: any) {
    super(props);
  }

  // 组件将要加载
  componentWillMount() {
    window.setTimeout(() => {
      this.fetchLoad();
    }, 100);
  }

  handleSubmit = () => {
    this.props.onSubmit();
  }

  renderUI() {
    const { getFieldDecorator } = this.props.form;
    const style = {
      display: this.props.show === false ? 'none' : 'block'
    };
    return (
      <div style={style} className='view-form'>
        <Form inline ref='form' onSubmit={this.handleSubmit} children={this.props}>
          <section className='view-section'>
            <Form.Item
              {...FormItemLayout}
              label='E-mail'
              ref='email'
              hasFeedback>{getFieldDecorator('email', {
                rules: [{
                  type: 'email', message: 'The input is not valid E-mail!',
                }, {
                  required: false, message: 'Please input your E-mail!',
                }],
              })(
                <Input />
                )}
            </Form.Item>
            <Form.Item
              {...FormItemLayout}
              label='NickName'
              hasFeedback>{getFieldDecorator('nickName', {
                rules: [{
                  required: false, message: 'The input is required!'
                }, {
                  min: 2, message: 'Please input more than 2 char!',
                }],
              })(
                <Input />
                )}
            </Form.Item>
            <Form.Item
              {...FormItemLayout}
              label='Birthday'
              hasFeedback>{getFieldDecorator('birthday', {
                rules: [{
                  required: false, message: 'The input is required!'
                }],
              })(
                <DatePicker showTime format='YYYY-MM-DD' />
                )}
            </Form.Item>
            <Form.Item
              {...FormItemLayout}
              label='DatePicker'
              hasFeedback>{getFieldDecorator('DatePicker', {
                rules: [{
                  required: false, message: 'The input is required!'
                }],
              })(
                <DatePicker.RangePicker showTime />
                )}
            </Form.Item>
            <Form.Item
              {...FormItemLayout}
              label='Gender'
              hasFeedback>{getFieldDecorator('Gender', {
                rules: [{
                  required: false, message: 'The input is required!'
                }],
              })(
                <Radio.Group>
                  <Radio value='01'>Man</Radio>
                  <Radio value='02'>Woman</Radio>
                </Radio.Group>
                )}
            </Form.Item>
            <Form.Item
              {...FormItemLayout}
              label='Type'
              hasFeedback>{getFieldDecorator('Type', {
                rules: [{
                  required: false, message: 'The input is required!'
                }],
              })(
                <Radio.Group>
                  <Radio.Button value='01'>Type1</Radio.Button>
                  <Radio.Button value='02'>Type2</Radio.Button>
                  <Radio.Button value='03'>Type3</Radio.Button>
                </Radio.Group>
                )}
            </Form.Item>
            <Form.Item
              {...FormItemLayout}
              label='Upload'
              className='ant-form-item-row ant-form-item-auto'
              hasFeedback>{getFieldDecorator('Upload', {
                rules: [{
                  required: false, message: 'The input is required!'
                }],
              })(
                <Upload name='logo' action='/upload.do' listType='picture' >
                  <Button type='ghost'>
                    <Icon type='upload' /> Click to upload
                  </Button>
                </Upload>
                )}
            </Form.Item>
            <Form.Item
              {...FormItemLayout}
              label='Select'
              hasFeedback
            >
              {getFieldDecorator('select', {
                rules: [
                  { required: false, message: 'Please select your country!' },
                ],
              })(
                <Select placeholder='Please select a country'>
                  <Select.Option value='china'>China</Select.Option>
                  <Select.Option value='use'>U.S.A</Select.Option>
                </Select>
                )}
            </Form.Item>

            <Form.Item
              {...FormItemLayout}
              label='Select[multiple]'
            >
              {getFieldDecorator('select-multiple', {
                rules: [
                  { required: false, message: 'Please select your favourite colors!', type: 'array' },
                ],
              })(
                <Select multiple placeholder='Please select favourite colors'>
                  <Select.Option value='red'>Red</Select.Option>
                  <Select.Option value='green'>Green</Select.Option>
                  <Select.Option value='blue'>Blue</Select.Option>
                </Select>
                )}
            </Form.Item>

          </section>
        </Form>
      </div>
    );
  }
}
export default createMForm(CustomerDetailStep);

